.caroselWrapper {
    width: 100%;
    min-height: 300px;
    position: relative;
    display: flex;
    // overflow: hidden;

    div {
        position: absolute;
        cursor: pointer;
    }

    .pre{
        left: 0;
        height: 100%;
        width: 100px;
        z-index: 3;
        background: linear-gradient(to right, rgba(10, 10, 10, 0.6) , rgba(10, 10, 10, 0));
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
    }

    .next{
        right: 0;
        height: 100%;
        width: 100px;
        z-index: 3;
        background: linear-gradient(to left, rgba(10, 10, 10, 0.6) , rgba(10, 10, 10, 0));
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
    }

    .preImg {
        z-index: 1;
        transition: left 2s;
        .mask{
            width: 100%;
            height: 100%;
            background: rgba(10, 10, 10, 0.6)
        }
    }

    .currentImg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        transition: left 2s;
        box-shadow: 0px 10px 10px rgba(10, 10, 10, 0.4);
    }

    .tempImg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: left 2s;
        z-index: 0;
    }

    .nextImg {
        z-index: 1;
        right: 0;
        transition: right 2s;
        .mask{
            width: 100%;
            height: 100%;
            background: rgba(10, 10, 10, 0.6)
        }
    }
}